<template>
  <NavSwiper />
  <div ref="target">
    <NewGoodCourse v-if='targetIsVisible'></NewGoodCourse>
  </div>
</template>


<script setup>
import Headers from '@/components/Header.vue'
import NavSwiper from '@/components/home/NavSwiper.vue'
import Foot from '@/components/Foot.vue'
//异步组件
import { defineAsyncComponent, ref } from "vue"
import { useIntersectionObserver } from '@vueuse/core'
const NewGoodCourse = defineAsyncComponent(() =>
  import('@/components/home/NewGoodCourse.vue')
)
const target = ref(null);
const targetIsVisible = ref(false);

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      targetIsVisible.value = isIntersecting
    }
  },
)
//--异步组件

</script>

<style>
</style>